<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-11-01 10:35:29
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2025-01-09 15:04:20
 * @FilePath: \hy-ui\src\views\app\appInfo\components\detail\dataDict\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-11-01 10:35:29
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2023-11-01 16:14:28
 * @FilePath: \hy-ui\src\views\app\appInfo\components\detail\dataDict\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dataDict" v-loading="loading">
    <div class="left">
      <div style="display: flex; align-items: flex-start">
        <el-form
          ref="queryParamsFormRef"
          :model="queryParamsForm"
          label-width="75px"
          @submit.native.prevent
        >
          <el-form-item label="名称/编号" prop="searchValue">
            <el-input
              v-model="queryParamsForm.searchValue"
              placeholder="请输入字典名称和编号"
              @keyup.enter.native="getList"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          style="background: #2f54eb; margin-left: 10px"
          icon="el-icon-search"
          @click="getList"
          size="small"
          >查询</el-button
        >
        <el-button
          icon="el-icon-refresh-right"
          @click="() => handleReset('queryParamsFormRef')"
          size="small"
          >重置</el-button
        >
      </div>
      <div>
        <el-button
          type="primary"
          style="background: #2f54eb;"
          icon="el-icon-plus"
          @click="() => handleOperate()"
          size="small"
          >新增</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="() => handleDelete()"
          :disabled="!chooseLsit.length"
          size="small"
          >删除</el-button
        >
      </div>
      <div class="leftTable" style="margin-top: 8px">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
          highlight-current-row
          @current-change="handleCurrentChange"
          size="mini"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column prop="date" label="序号" width="80" align="center">
            <template slot-scope="scope">
              {{
                (queryParamsForm.pageNum - 1) * queryParamsForm.pageSize +
                (scope.$index + 1)
              }}
            </template>
          </el-table-column>
          <el-table-column prop="dictName" label="字典名称" align="center">
          </el-table-column>
          <el-table-column prop="dictType" label="字典编号" align="center">
          </el-table-column>
          <el-table-column prop="remark" label="字典备注" align="center">
          </el-table-column>
          <el-table-column
            prop="status"
            label="字典状态"
            align="center"
            :formatter="(row) => (row.status === '0' ? '正常' : '停用')"
          >
          </el-table-column>
          <el-table-column prop="operate" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click.stop="() => handleOperate(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" @click.stop="() => handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParamsForm.pageNum"
            :limit.sync="queryParamsForm.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>

    <div class="right">
      <div
        style="
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
        "
      >
        <el-form
          ref="queryParamsFormRightRef"
          :model="queryParamsFormRight"
          label-width="68px"
          @submit.native.prevent
        >
          <el-form-item label="字典明细" prop="dictLabel">
            <el-input v-model="queryParamsFormRight.dictLabel"  @keyup.enter.native="getListRight"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button
            type="primary"
            style="background: #2f54eb; margin-left: 20px"
            icon="el-icon-search"
            @click="getListRight"
            size="small"
            >查询</el-button
          >
          <el-button
            icon="el-icon-refresh-right"
            @click="() => handleReset('queryParamsFormRightRef')"
            size="small"
            >重置</el-button
          >
        </div>
      </div>
      <div>
        <el-button
          type="primary"
          style="background: #2f54eb;"
          icon="el-icon-plus"
          @click="() => handleOperateRight()"
          :disabled="!currentRow"
           size="small"
          >新增</el-button
        >
      </div>
      <div class="leftTable" style="margin-top: 8px">
        <el-table :data="tableDataRight" border style="width: 100%" size="mini">
          <el-table-column prop="dictLabel" label="字典明细" align="center">
          </el-table-column>
          <el-table-column prop="dictValue" label="字典明细值" align="center">
          </el-table-column>
          <el-table-column prop="operate" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="() => handleOperateRight(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" @click="handleDeleteRight(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <pagination
            v-show="totalRight > 0"
            :total="totalRight"
            :page.sync="queryParamsFormRight.pageNum"
            :limit.sync="queryParamsFormRight.pageSize"
            @pagination="getListRight"
          />
        </div>
      </div>
    </div>
    <el-dialog
      :title="rowLeft ? '编辑' : '新增'"
      :visible.sync="openLeft"
      width="35%"
      :before-close="() => (openLeft = false)"
    >
      <el-form
        :model="formLeft"
        :rules="rulesLeft"
        ref="formLeft"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="字典名称" prop="dictName">
          <el-input
            v-model="formLeft.dictName"
            placeholder="请输入字典名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="字典编号" prop="dictType">
          <el-input
            v-model="formLeft.dictType"
            placeholder="请输入字典编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="字典状态" prop="status">
          <el-radio-group v-model="formLeft.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input
            v-model="formLeft.remark"
            placeholder="请输入字典描述"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="() => (openLeft = false)">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('formLeft')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :title="rowRight ? '编辑' : '新增'"
      :visible.sync="openRight"
      width="35%"
      :before-close="() => (openRight = false)"
    >
      <el-form
        :model="formRight"
        :rules="rulesRight"
        ref="formRight"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="字典明细" prop="dictLabel">
          <el-input
            v-model="formRight.dictLabel"
            placeholder="请输入字典明细"
          ></el-input>
        </el-form-item>
        <el-form-item label="字典明细值" prop="dictValue">
          <el-input
            v-model="formRight.dictValue"
            placeholder="请输入字典明细值"
          ></el-input>
        </el-form-item>

        <el-form-item label="排序值" prop="dictSort">
          <el-input
            v-model="formRight.dictSort"
            placeholder="请输入排序值"
            type="number"
            :min="0"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formRight.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input
            v-model="formRight.remark"
            placeholder="请输入描述"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="() => (openRight = false)">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('formRight')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  appDictTypeList,
  appDictTypeDetail,
  appDictTypeAdd,
  appDictTypeUpdate,
  appDictTypeDelete,
  appDictDataList,
  appDictDataDetail,
  appDictDataAdd,
  appDictDataUpdate,
  appDictDataDelete,
} from "@/api/app/dataDict.js";
export default {
  name: "dataDict",
  props: {
    appId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      formLeft: {
        status: "0",
      },
      rulesLeft: {
        dictName: [
          { required: true, message: "请输入字典名称", trigger: "blur" },
          {
            pattern: /^[^\s/\\]+$/,
            message: "字典名称不能包含斜线、空格",
            trigger: "blur",
          },
        ],
        dictType: [
          { required: true, message: "请输入字典编码", trigger: "blur" },
          {
            pattern: /^[^\s\u4e00-\u9fa5/\\]+$/,
            message: "字典编码不能包含汉字、斜线、空格",
            trigger: "blur",
          },
        ],
        status: [
          { required: true, message: "请选择字典状态", trigger: "change" },
        ],
      },
      formRight: {
        status: "0",
      },
      rulesRight: {
        dictLabel: [
          { required: true, message: "请输入字典明细", trigger: "blur" },
          {
            pattern: /^[^\s/\\]+$/,
            message: "字典明细不能包含斜线、空格",
            trigger: "blur",
          },
        ],
        dictValue: [
          { required: true, message: "请输入字典明细值", trigger: "blur" },
          {
            pattern: /^[^\s/\\]+$/,
            message: "字典明细不能包含斜线、空格",
            trigger: "blur",
          },
        ],
        zt: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
      chooseLsit: [],
      openLeft: false,
      openRight: false,
      queryParamsForm: {
        pageNum: 1,
        pageSize: 10,
        searchValue: undefined,
      },
      queryParamsFormRight: {
        pageNum: 1,
        pageSize: 10,
        dictLabel: undefined,
      },
      total: 0,
      totalRight: 0,
      tableData: [],
      tableDataRight: [],
      rowLeft: {},
      rowRight: {},
      currentRow: null,
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    handleCurrentChange(val) {
      this.currentRow = val;
      this.getListRight();
    },
    async getList() {
      this.loading = true;
      const res = await appDictTypeList({
        ...this.queryParamsForm,
        appId: this.appId,
      });
      if (res.code == 200) {
        this.tableData = res.rows;
        this.total = res.total;
      }
      this.loading = false;
    },
    async getListRight() {
      if (!this.currentRow?.dictType) return;
      this.loading = true;
      const res = await appDictDataList({
        ...this.queryParamsFormRight,
        dictType: this.currentRow?.dictType,
      });
      if (res.code == 200) {
        this.tableDataRight = res.rows;
        this.totalRight = res.total;
      }
      this.loading = false;
    },
    handleDelete(row) {
      this.$confirm(
        `此操作将永久删除${row ? "该条" : "选择"}数据, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          const ids = [];
          if (!row) {
            this.chooseLsit?.forEach((item) => ids.push(item.dictId));
          }
          const res = await appDictTypeDelete(
            !row ? ids.toString() : row.dictId
          );
          if (res.code == 200) {
            this.$message.success("删除成功");
            if (row && this.currentRow?.dictId === row.dictId) {
              this.currentRow = null;
            }
            this.getList();
          }
        })
        .catch(() => {});
    },
    async handleOperate(row) {
      this.rowLeft = row;
      this.openLeft = true;
      if (row) {
        const res = await appDictTypeDetail(row.dictId);
        if (res.code == 200) {
          this.formLeft = res.data;
        }
      } else {
        this.formLeft = { status: "0" };
      }
    },
    handleDeleteRight(row) {
      this.$confirm(`此操作将永久删除该条数据, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await appDictDataDelete(row.dictCode);
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getListRight();
          }
        })
        .catch(() => {});
    },
    async handleOperateRight(row) {
      this.rowRight = row;
      this.openRight = true;
      if (row) {
        const res = await appDictDataDetail(row.dictCode);
        if (res.code == 200) {
          this.formRight = res.data;
        }
      } else {
        this.formRight = { status: "0" };
      }
    },
    handleSelectionChange(list) {
      this.chooseLsit = list;
    },
    handleReset(value) {
      this.$refs[value].resetFields();
      if (value === "queryParamsFormRef") {
        this.getList();
      } else {
        this.getListRight();
      }
    },
    handleSubmit(type) {
      this.$refs[type].validate(async (valid) => {
        if (valid) {
          if (type === "formLeft") {
            const res = this.rowLeft
              ? await appDictTypeUpdate({ ...this.formLeft, appId: this.appId })
              : await appDictTypeAdd({ ...this.formLeft, appId: this.appId });
            if (res.code == 200) {
              this.$message.success(this.rowLeft ? "编辑成功" : "新增成功");
              this.openLeft = false;
              this.getList();
            }
          } else {
            const res = this.rowRight
              ? await appDictDataUpdate({
                  ...this.formRight,
                  dictType: this.currentRow.dictType,
                })
              : await appDictDataAdd({
                  ...this.formRight,
                  dictType: this.currentRow.dictType,
                });
            if (res.code == 200) {
              this.$message.success(this.rowRight ? "编辑成功" : "新增成功");
              this.openRight = false;
              this.getListRight();
            }
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dataDict {
  display: flex;
  .pagination {
    height: 50px;
  }
  .left {
    flex: 3;
    margin-right: 30px;
  }
  .right {
    flex: 2;
  }
}
</style>
